﻿@model CuongHanh.Models.Product
@{
    ViewBag.Title = "Acticle";
    Layout = "~/Views/Shared/_ALayout.cshtml";
}
@section script
{
    <script src="@Url.Content("~/Scripts/ckeditor/ckeditor.js")" type="text/javascript"> </script>
    <script type="text/javascript">
        var path1 = '@Url.Content("~/Content/Images/Article/")';
        $(document).ready(function() {
            var id = '@Model.Id';
            var isCompleted = '@ViewBag.Completed';
                var temp = unescape('@Model.Article');
                for (var i = 0; i < 10; i++) {
                    var name = "I_ARTICLE_" + id + '_' + i;
                    if (temp.indexOf(name) == -1)
                        break;
                    else
                        temp=temp.replace(name, path1 + name + '.jpg');
                }
                $('#Info1').val(temp);
            $('#formData').submit(function() {
                GetImage();
            });
        });

        var images = [];
        var htmlc = "";
        var count = 0;
        function GetImage() {
            var id = '@Model.Id';
            var datas = CKEDITOR.instances.Info1.getData();
            var index = 0;
            while (index != -1) {
                index = datas.indexOf("src=");
                if (index != -1) {
                    datas = datas.substring(index + 5, datas.length);
                    index = 0;
                    var index1 = datas.indexOf('"');
                    if (index1 != -1) {
                        images[count++] = datas.substring(index,index1);
                        datas = datas.substring(index1+1, datas.length);
                    }
                }
            }
            htmlc = CKEDITOR.instances.Info1.getData();
            var rrr = "";
            for (var i = 0; i < images.length; i++) {
                htmlc = htmlc.replace(images[i], "I_ARTICLE_" +id+'_' + i);
                rrr +='<input name="pictures" type="hidden" value="' + images[i] + '"/>';
            }
            $('#Info').val(escape(htmlc));
            $('#images').html(rrr);
        }
    </script>
}

<style type="text/css">
     .button1 {
            background-color: #4599D6;
            border: 1px solid #126DAF;
            border-radius: 3px;
            color: #FFFFFF;
            font-family: arial;
            font-size: 13px;
            font-weight: bold;
            height: 25px;
            position: relative;
            top: -1px;
            padding: 0 5px;
        }
        .button1:hover {
            background-color: #126DAF;
        }
</style>
@{
    using (Html.BeginForm("Article",
                          "AProduct",
                          FormMethod.Post,
                          new
                              {
                                      Id = "formData"
                              }))
    {
        <div id="images"  style="display: none"></div>
        
        <div style="text-align: right; width: 100%; margin: 5px 20px 5px 0;">
            <input class="button1" type="submit" value="Lưu lại" />
        </div>
            @Html.HiddenFor(m=>m.Id)
            <textarea id="Info1" > </textarea>
            <input type="hidden" name="Article" id="Info"/>
            <script>

                CKEDITOR.replace('Info1', {
                    
                    height:"450",
                    /*
					 * Ensure that htmlwriter plugin, which is required for this sample, is loaded.
					 */
                    extraPlugins: 'htmlwriter',

                    /*
					 * Style sheet for the contents
					 */
                    contentsCss: 'body {color:#000; background-color#:FFF;}',

                    /*
					 * Simple HTML5 doctype
					 */
                    docType: '<!DOCTYPE HTML>',

                    /*
					 * Allowed content rules which beside limiting allowed HTML
					 * will also take care of transforming styles to attributes
					 * (currently only for img - see transformation rules defined below).
					 *
					 * Read more: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
					 */
                    allowedContent:
                        'h1 h2 h3 p pre[align]; ' +
                            'blockquote code kbd samp var del ins cite q b i u strike ul ol li hr table tbody tr td th caption; ' +
                            'img[!src,alt,align,width,height]; font[!face]; font[!family]; font[!color]; font[!size]; font{!background-color}; a[!href]; a[!name]',

                    /*
					 * Core styles.
					 */
                    coreStyles_bold: { element: 'b' },
                    coreStyles_italic: { element: 'i' },
                    coreStyles_underline: { element: 'u' },
                    coreStyles_strike: { element: 'strike' },

                    /*
					 * Font face.
					 */

                    // Define the way font elements will be applied to the document.
                    // The "font" element will be used.
                    font_style: {
                        element: 'font',
                        attributes: { 'face': '#(family)' }
                    },

                    /*
					 * Font sizes.
					 */
                    fontSize_sizes: 'xx-small/1;x-small/2;small/3;medium/4;large/5;x-large/6;xx-large/7',
                    fontSize_style: {
                        element: 'font',
                        attributes: { 'size': '#(size)' }
                    },

                    /*
					 * Font colors.
					 */

                    colorButton_foreStyle: {
                        element: 'font',
                        attributes: { 'color': '#(color)' }
                    },

                    colorButton_backStyle: {
                        element: 'font',
                        styles: { 'background-color': '#(color)' }
                    },

                    /*
					 * Styles combo.
					 */
                    stylesSet: [
                        { name: 'Computer Code', element: 'code' },
                        { name: 'Keyboard Phrase', element: 'kbd' },
                        { name: 'Sample Text', element: 'samp' },
                        { name: 'Variable', element: 'var' },
                        { name: 'Deleted Text', element: 'del' },
                        { name: 'Inserted Text', element: 'ins' },
                        { name: 'Cited Work', element: 'cite' },
                        { name: 'Inline Quotation', element: 'q' }
                    ],

                    on: {
                        pluginsLoaded: configureTransformations,
                        loaded: configureHtmlWriter
                    }
                });

                /*
				 * Add missing content transformations.
				 */

                function configureTransformations(evt) {
                    var editor = evt.editor;

                    editor.dataProcessor.htmlFilter.addRules({
                        attributes: {
                            style: function(value, element) {
                                // Return #RGB for background and border colors
                                return CKEDITOR.tools.convertRgbToHex(value);
                            }
                        }
                    });

                    // Default automatic content transformations do not yet take care of
                    // align attributes on blocks, so we need to add our own transformation rules.

                    function alignToAttribute(element) {
                        if (element.styles['text-align']) {
                            element.attributes.align = element.styles['text-align'];
                            delete element.styles['text-align'];
                        }
                    }

                    editor.filter.addTransformations([
                        [{ element: 'p', right: alignToAttribute }],
                        [{ element: 'h1', right: alignToAttribute }],
                        [{ element: 'h2', right: alignToAttribute }],
                        [{ element: 'h3', right: alignToAttribute }],
                        [{ element: 'pre', right: alignToAttribute }]
                    ]);
                }

                /*
				 * Adjust the behavior of htmlWriter to make it output HTML like FCKeditor.
				 */

                function configureHtmlWriter(evt) {
                    var editor = evt.editor,
                        dataProcessor = editor.dataProcessor;

                    // Out self closing tags the HTML4 way, like <br>.
                    dataProcessor.writer.selfClosingEnd = '>';

                    // Make output formatting behave similar to FCKeditor.
                    var dtd = CKEDITOR.dtd;
                    for (var e in CKEDITOR.tools.extend({ }, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent))
                        dataProcessor.writer.setRules(e, {
                            indent: true,
                            breakBeforeOpen: true,
                            breakAfterOpen: false,
                            breakBeforeClose: !dtd[e]['#'],
                            breakAfterClose: true
                        });
                }

            </script>
    }
}